<template>
  <div class='home-nav-list'>
    <van-swipe 
        class="home-banner-content"
          :duration="1000"
          :loop='false'
          indicator-color="red">
          <van-swipe-item>
            <van-grid :column-num="5" :border='false'>
              <van-grid-item 
              v-for="item in navs"
               :key="item.id"
                :icon="item.img"
                 :text="item.title" />
            </van-grid>
          </van-swipe-item>
          <van-swipe-item>
            <van-grid :column-num="5" :border='false'>
              <van-grid-item 
              v-for="item in navs"
               :key="item.id"
                :icon="item.img"
                 :text="item.title" />
            </van-grid>
          </van-swipe-item>
        </van-swipe>
  </div>
</template>
<script setup lang='ts'>
  const navs = [
    {id:1,title:'都有超市',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png"'},
    {id:2,title:'都有超市2',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png"'},
    {id:3,title:'都有超市3',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png"'},
    {id:4,title:'都有超市4',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png"'},
    {id:5,title:'都有超市5',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png"'},
    {id:6,title:'都有超市6',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png"'},
    {id:7,title:'都有超市7',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png"'},
    {id:8,title:'都有超市8',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png"'},
    {id:9,title:'都有超市9',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png"'},
    {id:10,title:'都有超市0',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png"'},
    
  ]
</script>
<style scoped lang="scss">
  .home-nav-list{
    height: 210px;
    box-sizing: border-box; 
    border: 1px solid #333;
    padding: 15px;
    > home-banner-content{
      height:100%;

    }

  }
</style>